<template>
  <div class="box">
    <carousel-3d
      :autoplay="true"
      :autoplayTimeout="3000"
      :display="3"
      :width="cWidth"
      :height="1020"
      :animationSpeed="1000"
    >
      <!-- <slide v-for="(item, i) in slides" :index="i" :key="i">
        <template slot-scope="obj">
          <img :src="item.src" @click="imgClick(obj)" />
        </template>
      </slide> -->
      <slide :index="0">
        <template>
          <img :src="slides1" />
        </template>
      </slide>
      <slide :index="1">
        <template slot-scope="obj">
          <img :src="slides2" @click="imgClick(obj)" />
        </template>
      </slide>
      <slide :index="2">
        <template slot-scope="obj">
          <img :src="slides3" @click="imgClick(obj)" />
        </template>
      </slide>
    </carousel-3d>
  </div>
</template>
<script>

import { Carousel3d, Slide } from 'vue-carousel-3d'
export default {
components: {
    Carousel3d,
    Slide
  },
    name: 'zt',
    data() {
        return {
          cWidth:'',
          slides1:require('../assets/map.png'),
          slides2:require('../assets/map.png'),
          slides3:require('../assets/map.png'),
          slides:[]
        };
    },
  created() {
    this.changeWidth();
  },
  mounted() {
    window.onresize = () => {
      this.changeWidth();
    };
    console.log(this.cWidth)
  },
  methods: {
    //根据电脑分辨率设置轮播图宽度
    changeWidth() {
      this.cWidth = document.body.clientWidth -1000;
    },
  },
};
</script>

<style scoped>
.box{
  width: 100%;
  height: 100vh;
}
/deep/.carousel-3d-slide{
  border: 0 !important;
  background-color:transparent !important;
}
</style>

